const path = require( 'path' );

const HtmlWebpackPlugin = require('html-webpack-plugin');

let VueLoaderPlugin = require( "vue-loader/lib/plugin-webpack5.js" );

let vueLoaderPlugin = new VueLoaderPlugin();

let htmlPluginConfig = {
    template : './src/index.html' ,
    filename : 'index.html'
}

let htmlPlugin = new HtmlWebpackPlugin( htmlPluginConfig );

module.exports = {
    mode : 'development',
    entry: path.join( __dirname , "./src/source.js" ),
    output:{
        path: path.join( __dirname , "./dist" ),
        filename: "target.js"
    },
    module : {
        rules: [
            { test:/\.css$/, use:[ 'style-loader' , 'css-loader' ] },
            { test:/\.jpg|png|gif|bmp|ttf|eot|svg|woff|woff2|otf$/, use:"url-loader?limit=102400"},
            { test:/\.js$/, use:[ 'babel-loader' ], exclude: /node_modules/ },
            { test:/\.vue$/, use:['vue-loader'] }
        ]
    },
    plugins : [ htmlPlugin , vueLoaderPlugin ]
}